<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<title>首页</title>
<head>
<link rel="stylesheet" href="css/homestyle.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/chat.css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/dh.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<script type="text/javascript" src="js/hotGoods.js"></script>

<script type="text/javascript">      
   var listType = null;
   var timer;
    $(document).ready(function () {
    		
            $('.tag li a').each(function () {
                if ($($(this))[0].href == String(window.location))
                    $(this).addClass('now');
            });
        });
        
	$(function() {
		$("a").focus(function() {
			this.blur();
		});
		//商品分类
		$('.all-goods .item').hover(function() {
			$(this).addClass('active').find('s').hide();
			$(this).find('.product-wrap').show();
		}, function() {
			$(this).removeClass('active').find('s').show();
			$(this).find('.product-wrap').hide();
		});

		if ($("#a_01").attr("flag") == "true") { //没有登录
			$("#a_01").click(function() {
				window.location.href = "login.jsp";
			});
			$("#a_02,#a_03").click(function(){
				if(confirm("您还没有登录，请先登录？")){
					window.location.href = "login.jsp";
				}
			});
		
		} else { //已经登录
			$("#a_01,#a_02").click(function() {
				window.location.href = "personal.jsp";
			});
		
			$("#a_03").click(function(){
				$(".content").show();
				timer=setInterval(getchat,3000);
			});
		}
		
		
		//联系客服
		$("#send").click(function(){
			var content=$("#textarea").val();
			$.ajax({
				type:"post",
				url:"addChat.action",
				data:{content:content},
				success:function(msg){
				}
			});
			$(".chat01_content").append("<div>我:"+content+"</div>");
			$("#textarea").val("");
		});
	
		
		//结束联系客服
		$(".close_btn").click(function(){
			$.ajax({
				type:"post",
				url:"addChat.action",
				data:{content:"[endchat]"},
				success:function(msg){
					$(".content").hide();
				}
			});
			clearInterval(timer);
		});
		
			//注销
				$("#quit").click(function(){
					if(confirm("确认注销？")){
						window.location.href="quit.action";
					}
					
				});
		
	});
   
   	var id=-1;
	var getchat=function(){
		$.ajax({
			type:"post",
			url:"getChat.action",
			data:{userFrom:"s10001"},
			success:function(msg){
				if(msg!="fail"){
					var newId=msg.split("_")[0];
					if(id!=newId){ 
						$(".chat01_content").append("<div>"+msg.split("_")[1]+"客服:"+msg.split("_")[4]+"<div style='float:right;margin-right:20px;'>"+msg.split("_")[3]+"</div></div>");
						id=newId;
					}
				}
				
			}
		});
	};
	
	function getlistType(type){
	   listType = type;
	   if("sale"==type){
	      $("#tp2").removeClass("tp");
	      $("#tp1").addClass("tp");
	   }else{
	      $("#tp1").removeClass("tp");
	      $("#tp2").addClass("tp");
	   }
	}
	
	function search(){
	   var name = $("#name").val();
	   window.location.href='getGoodbyType.action?good.goodName='+name+'&good.listType='+listType;
	}
	
</script>
<style type="text/css">
#myimg {
	position: absolute;
	left: -42px;
	top: -12px;
	width: 35px;
	heigth: 35px;
}
#quit{
	position: absolute;
	left: 140px;
	top: 16px;
	font-size:11px;
	font-color:black;
}
</style>

</head>
<body style="background-color:#708090;">
	<div id="d1">
		<div class="sh">
	            <a onclick="getlistType('sale')" id="tp1">代购商品</a>
	            <a onclick="getlistType('buy')" id="tp2">求购商品</a><br><br>
				<input type="text" name="name" style="width:250px;height:40px" id="name"/> 
				<input type="button" value="搜 索" style="width:60px;height:40px" id="bt" onclick="search()"/>		
	    </div>
	</div>
	
	<div id="d2">
		<a href="#" id="a_01" flag="${user==null}"> <c:choose>
				<c:when test="${user==null}">未登录</c:when>
				<c:otherwise>
					<img id="myimg" src="uImg/${user.userId}.jpg"/>${user.detailUser.nickName}
					<span><a href="#" id="quit">注销</a></span>
			</c:otherwise>
			</c:choose>
		</a><a href="#" id="a_02">个人中心</a> <a href="#" id="a_03">联系客服</a>
	</div>

<div style="background-image:url('img/home03.jpg');background-size:cover;margin-top:-43px;height:450px;">

	<!-- 1.电子产品  2.服装服饰 3.美妆饰品 4.食品饮料 5.婴幼用品 6.文学著作 -->
	
	<!--二级菜单-->
	<div class="nav-wrap">
		<div class="nav">
			<div class="goods">
				<h2 class="title">商品分类</h2>
				<div class="all-goods">
					<div class="item btnone">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=1&good.goodName=oo&good.listType=sale">电子产品</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos01">
							<div class="cf">
								<div class="fl wd252 pr20">
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a0ab8f70013" >华为  p9</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a1524de0028" >Apple 7</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a15e1d30029" >Porsche</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d240f700011" >努比亚 z11</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=2&good.goodName=oo&good.listType=sale">服装服饰</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos02">
							<div class="cf">
								<div class="fl wd252 pr20">
							
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a1be9e1002c">韩国潮牌</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a207f65002e" >普拉达</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981945829fe8301582a1d803d002d" >托里·伯奇</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d146fe20009" >花花公子</a>
										</li>
									</ul>
								</div>

							</div>
						</div>
					</div>

					<div class="item">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=3&good.goodName=oo&good.listType=sale">美妆饰品</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos03">
							<div class="cf">
								<div class="fl wd252 pr20">
								
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a2e890b000b">雅诗兰</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a309ac4000c">兰蔻Lancome</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a31437f000d">施华洛</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d0e9a3c0003">韩国abbamart</a>
										</li>
									</ul>
								</div>

							</div>
						</div>
					</div>

					<div class="item">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=4&good.goodName=oo&good.listType=sale">食品饮料</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos04">
							<div class="cf">
								<div class="fl wd252 pr20">
						
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a3e4ec8004a">黄油太妃</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a3f2725004b">曲奇饼</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a4d9d01582a50cd4c0001">椰子卷</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d2958b2001e">埃梅尔贝</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=5&good.goodName=oo&good.listType=sale">婴幼用品</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos05">
							<div class="cf">
								<div class="fl wd252 pr20">
								
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a40a5a5004c">babybio</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a29f301582a418843004d">美版雅培</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a498194582a4d9d01582a51a2650002">Nutrilon</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d2e3f19001f">Gerber嘉宝</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>


					<div class="item">
						<div class="product">
							<h3>
								<a href="getGoodbyType.action?good.type=6&good.goodName=oo&good.listType=sale">文学名著</a>
							</h3>
							<s></s>
						</div>
						<div class="product-wrap pos06">
							<div class="cf">
								<div class="fl wd252 pr20">
									
									<ul class="cf">
										<li><a href="hotGoodDetail.action?goodId=8a498194582a4d9d01582a5596b40004">十字街</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d1ac2a0000a">放屁大象</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d359fc60029">金色梦乡</a>
										</li>
										<li><a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d32db400028">帝王雍正</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<ul class="tag">
				<li><a href="home.jsp" style="color:white;border-bottom:3px solid white;box-shadow:0 0 30px FFFFCC;">首   页</a>
				</li>
				<li><a href="getGoodbyType.action?good.type=0&good.listType=buy">买家圈</a>
				</li>
				<li><a href="getGoodbyType.action?good.type=0&good.listType=sale">卖家圈</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- 图片切换 -->
	<div id="wrapper">


		<div id="slider-wrapper">

			<div id="slider" class="nivoSlider">
			    <a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d0e9a3c0003">
				<img src="img/2.jpg" alt=""title="韩国abbamart哑光自然橘红色粉色紫色胭脂膏"/></a>
			     <a href="hotGoodDetail.action?goodId=8a4981f5582cdd6601582cf63881005b">
				<img src="img/1.jpg" alt="" title="apple mac 高大尚的mac"/> </a>
				<a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d146fe20009">
			    <img src="img/3.jpg" alt="" title="花花公子冬季男装加绒加厚连帽夹克"/> </a>
			    <a href="hotGoodDetail.action?goodId=8a4981f5582cfc9601582d1ac2a0000a">
			    <img src="img/4.jpg" alt="" title="孩子们的最爱" /></a>
			</div>
			<div id="htmlcaption" class="nivo-html-caption">
				<strong>This</strong> is an example of a <em>HTML</em> caption with
				<a href="#">a link</a>.
			</div>
		</div>

	</div>


	<h3 style="font-size:26px;margin-left:10px">新品推荐</h3>
	<div class="hot" id="here">
		
	</div>
</div>

<!-- 联系客服 -->

    <div class="content">
        <div class="chatBox">
            <div class="chatLeft">
                <div class="chat01">
                    <div class="chat01_title">
                        <ul class="talkTo">
                            <li><a href="javascript:;">客服</a></li></ul>
                        <a class="close_btn" href="#"></a>
                    </div>
                    <div class="chat01_content">
                    </div>
                </div>
                <div class="chat02">
                    <div class="chat02_title">
                       
                        <div class="wl_faces_box">
                            <div class="wlf_icon">
                            </div>
                        </div>
                    </div>
                    <div class="chat02_content">
                        <textarea id="textarea"></textarea>
                    </div>
                    <div class="chat02_bar">
                        <ul>
                           
                            <li  id="send" style="right: 5px; top: 5px;"><a href="javascript:;">
                                <img src="img/send_btn.jpg"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="clear: both;">
            </div>
        </div>
    </div>



	<script type="text/javascript">
	    $(window).load(function() {
	        $('#slider').nivoSlider();
	    });

    </script>

</body>
</html>